<script setup lang="ts">
import { userStore } from '@/stores'

const store = userStore()
const handleAuth = () => {
  uni.navigateTo({
    url: '/pages/login/login',
  })
}
</script>

<template>
  <view class="auth-page">
    <slot v-if="store.token"></slot>
    <view v-else class="auth-content">
      <uni-icons type="locked" size="50" color="#999"></uni-icons>
      <text class="auth-text">没有权限访问</text>
      <button class="auth-btn" @click="handleAuth">
        <uni-icons type="auth" size="14" color="#fff"></uni-icons>
        去授权
      </button>
    </view>
  </view>
</template>

<style scoped>
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f8f8;
}

.auth-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px;
}

.auth-text {
  margin: 20px 0;
  color: #666;
  font-size: 16px;
}

.auth-btn {
  background-color: #007aff;
  color: #fff;
  border: none;
  padding: 10px 30px;
  border-radius: 25px;
  display: flex;
  align-items: center;
  gap: 5px;
}
</style>
